<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>程序设置</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/app.css" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}
			
			.mui-pages {
				top: 46px;
				height: auto;
			}
			
			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}
			
			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 200ms ease;
				transition: transform 200ms ease;
			}
			
			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			
			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}
			
			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}
			
			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}
			
			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}
			
			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}
			
			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			
			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				position: static;
				width: auto;
			}
			
			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}
			
			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}
			
			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
				transition: opacity 200ms ease, transform 200ms ease;
			}
			
			.mui-page {
				display: none;
			}
			
			.mui-pages .mui-page {
				display: block;
			}
			
			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}
			
			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}
			
			.mui-table-view {
				margin-top: 20px;
			}
			
			.mui-table-view:after {
				height: 0;
			}
			
			.mui-table-view span.mui-pull-right {
				color: #999;
			}
			
			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}
			
			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}
			
			.mui-content-padded {
				margin: 10px 0px;
			}
			
			h5 {
				margin: 0px 0px;
			}
			
			.mui-locker {
				margin: 35px auto;
				display: none;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="./css/feedback-page.css" />
	</head>

	<body>
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">程序设置</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content" id='version_local'>

				<!--<div class="mui-content-padded">-->
				<!--<h5>服务器连接设置</h5>-->
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-plus-visible">
								<a>服务器端口</a>
								<p>ip:10.10.10.37</p>
							</li>
							<li class="mui-table-view-cell mui-plus-visible">
								<a>服务器端口</a>
								<p>PORT:8080</p>
							</li>

						</ul>
						<!--</div>-->
						<!--<div class="mui-card">-->
						<!--<h5>功能设置</h5>-->
						<!--<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<span>声音</span>
								<div class="mui-switch mui-active">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>-->

						<!--<h5>程序设置</h5>-->
						<ul class="mui-table-view">
							<!--<li class="mui-table-view-cell mui-plus-visible">
								<a>程序初始化</a>
								<p>所有设置初始化</p>
							</li>-->
							<li id="check_update" class="mui-table-view-cell mui-plus-visible">
								<a id="update">更新程序</a>
								<p>版本号：v{{version_local}}</p>
							</li>

						</ul>
						<!--<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#lock" class="mui-navigate-right">设置锁屏图案</a>
							</li>
						</ul>-->
						<!--</div>-->
					</div>

				</div>
			</div>

			<!--<div id="lock" class="mui-page">
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>设置
				</button>
					<h1 class="mui-center mui-title">锁屏图案</h1>
				</div>
				<div class="mui-page-content">
					<div class="mui-content-padded">
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								使用手势解锁
								<div id="lockState" class="mui-switch">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						<div class="mui-locker" data-locker-width='320' data-locker-height='320' data-locker-options='{"ringColor":"rgba(221,221,221,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}'>
						</div>
					</div>
				</div>
			</div>-->
		</div>
	</body>
	<script src="./js/mui.min.js "></script>
	<script src="./js/mui.view.js "></script>
	<script src='./libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
	<script src='./libs/easymob-webim-sdk/strophe-custom-2.0.0.js'></script>
	<script src='./libs/easymob-webim-sdk/json2.js'></script>
	<script src="./libs/easymob-webim-sdk/easemob.im-1.0.5.js"></script>
	<script src="./js/mui.locker.js"></script>
	<script src="./js/app.js"></script>
	<script type="text/javascript" src="js/vue.min.js" ></script>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#setting'
		});
		var version_local = localStorage.getItem("version_local")
		console.log(version_local)
		var app = new Vue({
				el: '#version_local',
				data: {
					version_local: version_local
				}
			});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		mui('.mui-content .mui-switch').each(function() { //循环所有toggle
			//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
			this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false');
			/**
			 * toggle 事件监听
			 */
			this.addEventListener('toggle', function(event) {
				//event.detail.isActive 可直接获取当前状态
				this.parentNode.querySelector('span').innerText = '状态：' + (event.detail.isActive ? 'true' : 'false');
			});
		});

		document.getElementById("update").addEventListener('tap', function() {
			var server = "http://www.dcloud.io/check/update"; //获取升级描述文件服务器地址
			mui.getJSON(server, {
				"appid": plus.runtime.appid,
				"version": plus.runtime.version,
				"imei": plus.device.imei
			}, function(data) {
				if(data.status) {
					plus.ui.confirm(data.note, function(i) {
						if(0 == i) {
							plus.runtime.openURL(data.url);
						}
					}, data.title, ["立即更新", "取　　消"]);
				} else {
					mui.toast('EAP 已是最新版本~')
				}
			});
		});

		if(mui.os.stream) {
			document.getElementById("check_update").display = "none";
		}

//		(function($, doc) {
//			//$.init();
//			$.plusReady(function() {
//				var settings = app.getSettings();
//				var lockStateButton = doc.getElementById("lockState");
//				var locker = doc.querySelector('.mui-locker');
//				lockStateButton.classList[settings.gestures ? 'add' : 'remove']('mui-active')
//				locker.style.display = settings.gestures ? 'block' : 'none';
//				lockStateButton.addEventListener('toggle', function(event) {
//					var isActive = event.detail.isActive;
//					locker.style.display = isActive ? 'block' : 'none';
//					if(!isActive) {
//						//                      alert(0);
//						settings.gestures = '';
//						app.setSettings(settings);
//					}
//				}, false);
//				var record = [];
//				locker.addEventListener('done', function(event) {
//					var rs = event.detail;
//					
//					if(rs.points.length < 4) {
//						plus.nativeUI.toast('设定的手势太简单了');
//						record = [];
//						rs.sender.clear();
//						return;
//					}
//					record.push(rs.points.join(''));
//					if(record.length >= 2) {
//						if(record[0] == record[1]) {
//							plus.nativeUI.toast('解锁手势设定成功，以后用户只需使用手势解锁而无需输入密码登录。');
//							settings.gestures = record[0];
//							settings.autoLogin = true;
//							app.setSettings(settings);
//							setTimeout(function() {
//								$.back();
//							}, 200);
//						} else {
//							plus.nativeUI.toast('两次手势不一致,请重新设定');
//						}
//						rs.sender.clear();
//						record = [];
//					} else {
//						plus.nativeUI.toast('请确认手势设定');
//						rs.sender.clear();
//					}
//				}, false);
//			});
//		}(mui, document));

		//********************
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				//              console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				//进入手执设定界面时
				if(e.detail.page.id == 'lock') {
					var settings = app.getSettings();
					/*if (!settings.autoLogin) {
					    plus.nativeUI.toast('当前没有启用 “自动登录”，需要在登录时启用 "自动登录"，设定的手势锁屏才会升效。');
					}*/
					var lockStateButton = document.getElementById("lockState");
					var locker = document.querySelector('.mui-locker');
					lockStateButton.classList[settings.gestures ? 'add' : 'remove']('mui-active')
					locker.style.display = settings.gestures ? 'block' : 'none';
				}
				//              console.log(e.detail.page.id + ' show');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				//              console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				//              console.log(e.detail.page.id + ' back');
			});
		})(mui);
	</script>

</html>